<template>
  <div>
    <div class="box">
      <el-carousel height="50px" indicator-position="none">
        <el-carousel-item v-for="item in notices" :key="item.id">
          <div class="billboard-title-box" @click="toDetail(item.id)">
            <h2 class="billboard-title">
              {{ item.title }}
            </h2>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="columns">
      <div class="column is-three-quarters">
        <TopicList></TopicList>
      </div>
      <div class="column">
        <CardBar></CardBar>
      </div>
    </div>
  </div>
</template>

<script>
import {getBillboard} from "@/api/billboard";
import CardBar from "@/views/card/CardBar"
import PostList from '@/views/post/Index'
import {recentNotice} from "@/api/notice";

export default {
  name: "Home",
  components: {CardBar, TopicList: PostList},
  data() {
    return {
      notices: []
    };
  },
  created() {
  },
  mounted() {
    this.getNotice()
  },
  methods: {
    getNotice() {
      recentNotice().then(res => {

        this.notices = res.data
      })
    },
    toDetail(id) {
      localStorage.setItem('selectNoticeDetail', id);
      this.$router.push({
        name:'NoticeDetail',
        params: {
          noticeId: id
        }
      })

    }
  },
};
</script>
<style scoped>
.billboard-title-box {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;

  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.billboard-title {
  font-size: 34px;
  color: #167df0;
}
</style>